<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陈曼婷新婚快乐</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
    	body{min-width: 320px;max-width: 768px;background: url(img/0.jpg)no-repeat 100% 100%;background-position: center;}
        .box {
            width: 250px;
            height: 250px;
            border: 1px dashed #000;
            margin: 100px auto;
            position: relative;
            border-radius: 50%;
            /*让子盒子保持3D效果*/
            transform-style: preserve-3d;
           /* transform: rotateX(30deg) rotateY(-30deg);*/
            animation: gun 8s linear infinite;
        }
        .box>div {
            width: 100%;
            height: 100%;
            position: absolute;
            text-align: center;
            line-height: 250px;
            font-size: 60px;
            color: red;
            font-weight: 700;

        }
        .left {
            background-color: rgba(255,0,0,0.3);
            transform-origin: left;/*变换的中心*/
            transform: rotateY(90deg) translateX(-125px);
        }
        .right {
            background-color: rgba(0,0,255,0.3);
            transform-origin: right;/*变换的中心*/
            transform: rotateY(90deg) translateX(125px);
        }
        .forward {
            background-color: rgba(255,255,0,0.3);
            transform:  translateZ(125px);
        }
        .back {
            background-color: rgba(255,255,0,0.3);
            transform:  translateZ(-125px);
        }
        .up {
            background-color: rgba(255,0,255,0.3);
            transform: rotateX(90deg) translateZ(125px);
        }
        .down {
            background-color: rgba(99,66,33,0.3);
            transform: rotateX(-90deg) translateZ(125px);
        }
        @keyframes gun {
            0%{
                transform: rotateX(0deg)  rotateY(0deg) ;
            }
            100%{
                transform: rotateX(360deg)  rotateY(360deg) ;
            }
        } 
        #text{color:#cb3333;font-size: 0.24rem;line-height: 0.3rem;}
        .w1200{padding: 0 2%;width: 100%;}
    </style>
</head>
<body>
<div class="w1200">
	
<div class="box">
    <div class="up">祝</div>
    <div class="down">你</div>
    <div class="left">幸</div>
    <div class="right">福</div>
    <div class="forward">快</div>
    <div class="back">乐</div>
</div>
<audio src="img/给你们.mp3" autoplay ></audio>
<div id="text" style="text-index:2em;color:#cb3333;font-size: 0.22rem;line-height: 0.3rem;">
	
</div>
</div>
<script type="text/javascript">
	let divTyping = document.getElementById('text')
  let i = 0,
    timer = 0,
    str = `Emm,很遗憾没能见证你最美最幸福的重要时刻，但是还是要祝福你新婚快乐，幸福快乐，永远是最美的！<br>哈哈哈，看你们从初中相识，一路过来的艰辛，
    	真的不容易，在这过程肯定是免不了感情之间的摩擦,回往这些年的酸甜苦辣愿在以后的生活中要更乐观,幸福下去.时间真的很快,一起长大,一起玩耍,当初被父母打的时候,
    	相互慰问的时光,现在也将嫁为人妻,成为父母!<br>要幸福哦,家的大门永远是打开的☺☺`

  function typing () {
    if (i <= str.length) {
      divTyping.innerHTML = str.slice(0, i++) + '_'
      timer = setTimeout('typing()', 200)
    }
    else {
      divTyping.innerHTML = str//结束打字,移除 _ 光标
      clearTimeout(timer)
    }
  }

  typing();
  


</script>
<script type="text/javascript">
	  
  (function (doc, win){
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function() {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      if(clientWidth >= 640) {
         docEl.style.fontSize = '100px';
      }else{
        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
      }
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
</body>
</html>